<template>
  <div class="stats-container">
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="stat-item">
          <div class="stat-value">{{ wpm }}</div>
          <div class="stat-label">速度(WPM)</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="stat-item">
          <div class="stat-value">{{ accuracy }}%</div>
          <div class="stat-label">准确率</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="stat-item">
          <div class="stat-value">{{ mode === 'timed' ? remainingTime : timeElapsed }}</div>
          <div class="stat-label">{{ mode === 'timed' ? '剩余(秒)' : '用时(秒)' }}</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="stat-item">
          <div class="stat-value">{{ progress }}%</div>
          <div class="stat-label">完成度</div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'TypingStats',
  props: {
    accuracy: {
      type: Number,
      default: 0
    },
    wpm: {
      type: Number,
      default: 0
    },
    timeElapsed: {
      type: Number,
      default: 0
    },
    remainingTime: {
      type: Number,
      default: 0
    },
    mode: {
      type: String,
      default: 'standard'
    }
  }
}
</script>

<style lang="scss" scoped>
.stats-container {
  margin-top: 20px;

  .stat-item {
    text-align: center;
    padding: 10px;

    .stat-value {
      font-size: 24px;
      font-weight: bold;
      color: #409eff;
      margin-bottom: 5px;
    }

    .stat-label {
      font-size: 14px;
      color: #909399;
    }
  }
}
</style>
